<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 100px;height:100px;}
    .red{background: red;}
    .yellow{color: blue;}
  </style>
</head>
<body>
  <div class="box red" id="cont" style="border:solid 10px black" data-abc="这是一个abc属性" data-qwe="哈哈哈">
    这是<em>文字</em>
  </div>

  <input type="text" value="" class="txt">
  <input type="checkbox" value="" class="check">
</body>
<script>

  var box = document.querySelector(".box");
  var txt = document.querySelector(".txt");
  var check = document.querySelector(".check");

  console.log(box);
  console.log(txt);

  // ======

  console.log(box.className);
  // 会覆盖原class信息
  // box.className = "yellow";

  // ======
  
  box.classList.add("yellow");
  box.classList.remove("red");
  
  document.onclick = function(){
    box.classList.toggle("red");
  }
  console.log(box.classList);
  
  // ======
  
  box.id = "abc";
  console.log(box.id);
  
  // ======
  
  box.title = "这是title"
  console.log(box.title)
  
  // ======

  // 控制行内样式
  // console.log(box.style)
  // console.log(box.style.border)
  // console.log(box.style.color)
  // box.style.fontSize = "30px";
  // box.style.cssText = "width:100px;height:200px;background:pink;margin:0 auto;";

  // ======

  // 内容操作
  box.innerText = "hello <b>world</b>";
  console.log(box.innerText);
  box.innerHTML = "hello <b>world</b>";
  console.log(box.innerHTML);
  txt.value = "文本框"
  console.log(txt.value);

  // ======
  
  // 表单类
  check.checked = true;
  console.log(check.checked)
  
  txt.disabled = true;
  console.log(txt.disabled)
  
  // ======


  // html5新增的自定义属性的规范：所有的自定义属性都应该以：data-开头
  box.dataset.asd = "hello";
  box.dataset.abc = "heiheihei";

  delete box.dataset.qwe;

  console.log(box.dataset);


  // ========


  // ...



  
</script>
</html>